<template>
    <el-card>
        <el-form inline :disabled="!flag">
            <el-form-item label="一级分类">
                <el-select
                    style="width: 200px"
                    v-model="categoryStore.c1Id"
                    @change="handlerC2"
                >
                    <el-option
                        v-for="item in categoryStore.category1"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="二级分类">
                <el-select
                    style="width: 200px"
                    v-model="categoryStore.c2Id"
                    @change="handlerC3"
                >
                    <el-option
                        v-for="item in categoryStore.category2"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="三级分类">
                <el-select style="width: 200px" v-model="categoryStore.c3Id">
                    <el-option
                        v-for="item in categoryStore.category3"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import useCategoryStore from '@/store/modules/category';
defineProps(['flag']);
// 组件挂载完毕发送一次请求
const categoryStore = useCategoryStore();

onMounted(() => {
    categoryStore.getCategory1();
});
// 一级分类下拉菜单的 change 事件 并同时获取二级分类菜单的数据
const handlerC2 = () => {
    categoryStore.getCategory2();
    // 清除之前的数据
    categoryStore.c2Id = '';
    categoryStore.c3Id = '';
};
// 二级分类下拉菜单的 change 事件 并同时获取三级分类菜单的数据
const handlerC3 = () => {
    categoryStore.getCategory3();
};
</script>

<style lang="scss"></style>
